<template>
  <el-dialog :title="$t('aside.pleaseChoose')" width="30%" :rules="verification" 
    :visible.sync="selectConnectionDialogVisible" :append-to-body="true" :before-close="closeDialog">
        <el-form>
            <el-form-item :label="$t('mainHeader.serverList')">
                <el-select v-model="connection" value-key="name">
                    <el-option v-for="connection in connections" :key="connection.uid" :label="connection.name" :value="connection"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirm">{{$t('aside.determine')}}</el-button>
            <el-button @click="closeDialog">{{$t('aside.cancel')}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props:["selectConnectionDialogVisible"],
    data(){
        return {
            connection:null,
            verification:{
                connection:[
                    { required: true, message: this.$t("aside.connectionForm.nameNotEmpty"), trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        //确认
        confirm(){
            if(this.connection===null){
                this.$message.error({
                    message:this.$t('mainHeader.connectionEmpty')
                })
                return false
            }
            this.$emit('selectCallback',this.connection,false)
        },
        //关闭弹框
        closeDialog(){
            this.$emit('selectCallback',null,false)
        }
    },
    computed:{
        connections(){
            return this.$store.getters.connections
        }
    }
}
</script>

<style>

</style>